<template>
  <div class="App3">
    <h1>vue slot</h1>
    <hr>
    <div>没button, 语音, 图片</div>
    <MyInput></MyInput>
    <div>有button</div>
    <MyInput>
      <button slot="btn">百度一下</button>
    </MyInput>
    <div>有语音</div>
    <MyInput>
      <template v-slot:yuyin>
        <em>语音</em>
      </template>
    </MyInput>
    <div>有图片</div>
    <MyInput>
      <template #img>
        <b>图片</b>
      </template>
    </MyInput>
    <div>button, 语音, 图片都有的</div>
    <MyInput>
      <button slot="btn">百度一下</button>
      <template v-slot:yuyin>
        <em>语音</em>
      </template>
      <template #img>
        <em>图片</em>
      </template>
    </MyInput>
    <hr>
    <NavigationLink/>
    <br>
    <navigation-link>
      <template v-slot:before>
        <button>BEFORE BTN</button>
      </template>
      <img width="100" :src="logo" alt="">
      <template v-slot:after>
        <button>after BTN</button>
      </template>
    </navigation-link>
    <br>
    <NavigationLink>
      <button slot="before">BEFORE BTN</button>
      {{ msg.split(' ')[0] }}
      <button slot="after">after BTN</button>
    </NavigationLink>
    <br>
    <navigation-link>
      <template #before>
        <em>v-slot别名用法</em>
      </template>
      {{ msg.split(' ')[1] }}
      <template #after>
        <em>v-slot别名用法</em>
      </template>
    </navigation-link>
    <br>
    <navigation-link>
      <template #default>
        <button>submit</button>
      </template>
    </navigation-link>
    <br>
    <navigation-link>
      <img width="50" src="../assets/logo.png" alt="">
    </navigation-link>
<!--<NavigationLink title="baidu" />
    <br>
    <navigation-link title="jd"/>
    <br>
    <NavigationLink title="ali"/>
    <br>
    <NavigationLink title="ali"/>-->
  </div>
</template>

<script>
import logo from '../assets/logo.png'
import NavigationLink from "@/components/NavigationLink";
import MyInput from "@/components/MyInput";
export default {
  name: "App3",
  data() {
    return {
      msg: 'hello world',
      logo
    }
  },
  components: {
    NavigationLink,
    MyInput
  }
}
</script>

<style scoped>

</style>
